<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.txt {
		color: #ccc;
	}

	.black {
		color: #000;
	}
	</style>
</head>
<body>
	<input type="text" name="" class="txt" id='txt' value="请输入搜索关键字">
	<input type="button" name="" id='btn' value=" 搜 索 ">

	<script type="text/javascript">
		var txt = document.getElementById('txt');
		txt.onfocus = function() {
			if (txt.value === '请输入搜索关键字') {
				txt.value = '';
				txt.className = 'black';
			}
		}

		txt.onblur = function() {
			if (txt.value.length === 0) {
				txt.value = '请输入搜索关键字';
				txt.className = 'txt';
			}
		}
	</script>
</body>
</html>